<!DOCTYPE html>
<html>
  <head>
    <title>Canvas Firework with Ascend</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      canvas {
        display: block;
        background-color: #000;
      }
      #start {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 120px;
        height: 32px;
        border: none;
        background-color: #09f;
        color: #fff;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <canvas id="fireworkCanvas"></canvas>
    <button id="start">发射</button>
    <script src="./index.js"></script>
    <script>
      // 获取画布元素和绘图上下文，并设置画布大小为窗口大小
      const canvas = document.getElementById("fireworkCanvas");
      const ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const firework = new Firework(ctx);

      const startButton = document.getElementById("start");
      startButton.addEventListener("click", () => {
        firework.start();
      });
    </script>
  </body>
</html>
